@import '../var';


.ui-btn-box {
    display: inline-block;
}
.ui-btn {
    position: relative;
    border: 0rpx;
    display: inline-block;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: .7857em 1.5em .7857em;
    font-size: 28rpx;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    overflow: visible;
    margin: 0 0.25em 0 0;
    transform: translate(0, 0);
    border-radius: $radius;
    white-space: nowrap;
    color: var(--text-a);
    background-color: var(--ui-BG);
    vertical-align: baseline;
    &:first-child:last-child{
        margin: 0;
    }
    &:not([class*='round'])::after {
        border-radius: calc(#{$radius} * 2);
    }
    &:not([class*='border'])::after {
        // content: ' ';
        // width: 200%;
        // height: 200%;
        // display: block;
        // position: absolute;
        // z-index: 0;
        // top: 0;
        // left: 0;
        // transform: scale(0.5);
        // transform-origin: 0 0;
        // pointer-events: none;
        // box-sizing: border-box;
        display: none;
    }
    &.round::after {
        border-radius: #{$round-pill};
    }
    &.icon {
        padding: 0.8em 0.8em;
    }

    &.sm {
        font-size: 24rpx;
    }

    &.lg {
        font-size: 32rpx;
    }

    &.xl {
        font-size: 36rpx;
    }

    &.block {
        width: 100%;
        display: block;
        font-size: 32rpx;
    }

    &[disabled] {
        opacity: 0.6;
    }

    &.none-style {
        background-color: transparent !important;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
    }
}

.ui-btn:not(.icon) [class*='icon-'] {
    margin: 0 .25em;
}
